<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>23CSS初始化</title>
    <style>
        /* 清零所有标签的内外边距 */
        
        * {
            margin: 0;
            padding: 0;
            /* 盒子大小为width，padding和margin不会撑大盒子（前提是padding和margin不会超过width宽度） */
            box-sizing: border-box;
        }
        /* 去掉li的圆点 */
        
        li {
            list-style: none;
        }
        /* 去掉斜体 */
        
        em,
        i {
            font-style: normal;
        }
        
        a {
            text-decoration: none;
            color: #666;
        }
        
        a:hover {
            color: red;
        }
        
        img {
            /* 照顾低版本浏览器，如果图片外面有链接，默认会有边框 */
            border: 0;
            /* 取消图片底侧有空白缝隙 */
            vertical-align: middle;
        }
        
        button {
            /* 鼠标经过按钮变为小手 */
            cursor: pointer;
        }
        
        input,
        textarea {
            outline: none;
        }
        
        body {
            /* 抗锯齿，让文字放大不会有锯齿 */
            -webkit-font-smoothing: antialiased;
            background: #fff;
            /* "\5B8B\4F53"宋体的unicode编码，兼容性更好 */
            font: 16px/1.5 Microsoft YaHei, HeiTi SC, tahoma, "\5B8B\4F53";
            color: #666;
        }
        /* 闭合浮动写法，双伪元素 */
        /* .clearfix:after,
        .clearfix:before {
            content: "";
            转换为块级元素，且显示在一行
            display: table;
        }
        
        .clearfix:after {
            clear: both;
        } */
        
        .clearfix {
            zoom: 1;
        }
        
        .clearfix:after {
            /* 为元素必须写的参数 */
            content: ".";
            /* 插入的元素必须是块级 */
            display: block;
            /* 隐藏插入的元素 */
            height: 0;
            /* 清除浮动核心代码 */
            clear: both;
            /* 隐藏插入的元素 */
            visibility: hidden;
        }
        
        .box {
            width: 100px;
            background: pink;
        }
        
        .box .left {
            float: left;
        }
        
        .box .right {
            float: right;
        }
    </style>
</head>

<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <em>dfdfsadfadsf</em>
    <div class="box clearfix">
        <div class="left">左浮动</div>
        <div class="right">右浮动</div>
        <div class="left">左浮动</div>
        <div class="right">右浮动</div>
        <div class="left">左浮动</div>
        <div class="right">右浮动</div>
    </div>
    <div>上面需要清除浮动</div>
    <a href="#">超链接</a>
</body>

</html>